<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JSX语法糖</title>
	<script src="https://cdn.bootcss.com/react/15.6.1/react.min.js"></script>
	<script src="https://cdn.bootcss.com/react/15.6.1/react-dom.min.js"></script>
	<script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
	<style>
		body{

		}
	</style>
</head>
<body>
	<div id="container"></div>
	<script type='text/babel'>
		var TestClickComponent = React.createClass({
			render : function(){
				return (
					<div>
						<button onClick={this.handleClick}>显示|隐藏</button><span ref='tip'>测试点击</span>
					</div>
				)
			},
			handleClick : function(event){
				var tipE = this.refs.tip;

				if(!!tipE.style.display){

					tipE.style.display = '';
				}else{

					tipE.style.display = 'none';
				}

				event.stopPropagation();
				event.preventDefault();
			}
		});
		
		var TestInputComponent = React.createClass({
			getInitialState:function(e){
				return {
					inputContent:''
				}
			},
			render : function(){
				return(
					<div>
						<input type="text" onChange={this.handleChange} /><span>{this.state.inputContent}</span>
					</div>
				)
				
			},
			handleChange : function(e){
				this.setState({
					inputContent : e.target.value
				});
				e.preventDefault();
				e.stopPropagation();
			}
		});

		ReactDOM.render(
			<div>
				<TestClickComponent	/>
				<TestInputComponent />
			</div>,
			document.getElementById('container')
		);
	</script>
</body>
</html>